<template>
  <div class="account-security">
    <div class="user-msg-box">
      <div class="avatar-box">
        <div class="no-avatar" v-if="!userInfo.avatar">
          <p>{{userInfo.name[0]}}</p>
        </div>
        <div v-else class="has-avatar">
          <img :src="userInfo.avatar" alt="">
        </div>
      </div>
      <div class="user-msg-info">
        <div class="user-name">{{userInfo.name}} <el-tag style="font-size: 14px;margin-left: 10px;">{{userInfo.role}}</el-tag></div>
        <div class="info-item">
          <label class="info-label">上次登录时间：</label>
          <div class="info-content">
            {{userInfo.recentLoginTime}}
          </div>
          <label class="info-label" style="margin-left: 80px;">登录设备：</label>
          <div class="info-content">
            {{userInfo.loginDevice}}
          </div>
        </div>
        <div class="info-item">
          <label class="info-label">上次登录IP：</label>
          <div class="info-content">
            {{userInfo.recentLoginIp}}
          </div>
        </div>
      </div>
    </div>
    <div class="login-msg-box">
      <h2 class="header-title">登录信息</h2>
      <el-table
          :data="loginTable"
      >
        <el-table-column label="登录状态">
          <template #default="scope">
            <p :class="{'is-abnormal':scope.row.status !== 1}">{{scope.row.status === 1 ? '登录成功' : '登录失败'}}</p>
          </template>
        </el-table-column>
        <el-table-column label="登录设备" prop="device"></el-table-column>
        <el-table-column label="登录ip/地点">
          <template #default="scope">
            <p :class="{'is-abnormal':scope.row.ipStatus !== 1}">{{scope.row.ip}}</p>
          </template>
        </el-table-column>
        <el-table-column label="">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.ipStatus !== 1">ip异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="登录时间" prop="createdAt">
          <template #default="scope">
            <p>{{formatDate(scope.row.createdAt)}}</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="login-msg-footer">
        <PaginationView
            :total="queryData.total"
            :pageSize="queryData.pageSize"
            :currentPage="queryData.currentPage"
            @changeSize="handleSizeChange"
            @currentChange="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getUserInfo,getLoginMessage } from '@/api/user'
import { reactive, ref } from "vue";
import { formatDate } from "@/utils/tools"
import PaginationView from './PaginationView'
const defaultUserInfo = {
  id: 0,
  role: '',
  introduction: '',
  account: '',
  avatar: '',
  name: '',
  recentLoginTime: '',
  recentLoginIp: '',
  strategy: []
}
const userInfo = reactive(Object.assign({},defaultUserInfo))
// 获取用户个人信息
getUserInfo().then(res => {
  Object.assign(userInfo,res.data)
})

const defaultQuery = reactive({
  total: 0,
  pageSize: 5,
  currentPage: 1,
})

const queryData = reactive(Object.assign({},defaultQuery))
const loginTable = ref([])
const handleGetLoginMessage = async () => {
  let res = await getLoginMessage(queryData)
  queryData.total = res.data.total
  loginTable.value = res.data.list
}
handleGetLoginMessage()
const handleSizeChange = (size) => {
  queryData.pageSize = size
  handleGetLoginMessage()
}
const handleCurrentChange = (page) => {
  queryData.currentPage = page
  handleGetLoginMessage()
}
</script>

<style scoped lang="scss">
  .account-security{
    .user-msg-box{
      padding: 40px;
      display: flex;
      box-shadow: 0 0 4px rgba(#000,0.04);
      background-color: #fff;
      .avatar-box{
        height: 120px;
        width: 120px;
        cursor: pointer;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        .no-avatar{
          display: flex;
          background-color: $mainColor;
          height: 100%;width: 100%;
          justify-content: center;align-items: center;
          p{
            color: #fff;
            font-size: 80px;
          }
        }
        .has-avatar{
          height: 100%;width: 100%;
          border-radius: 4px;
          img{
            height: 100%;width: 100%;
            border-radius: 4px;
          }
        }
      }
      .user-msg-info{
        .user-name{
          margin-bottom: 20px;
        }
      }
      .info-item{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        min-height: 32px;
        .info-label{
          width: 120px;
          display: flex;
          align-items: center;
          min-height: 32px;
        }
        .info-content{
          min-height: 32px;
          display: flex;
          align-items: center;
        }
      }
      .info-item:nth-last-child(1){
        margin-bottom: 0;
      }
    }
    .login-msg-box{
      box-shadow: 0 0 4px rgba(#000,0.04);
      background-color: #fff;
      margin-top: 25px;
      padding: 0 20px 20px;
      .header-title{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
      }
      .is-abnormal{
        color: #FF5240;
      }
    }
  }
</style>
